<template>
	<view class="clues-detail-container">
		<view v-if="clueInfo.status == 3" class="follow-up-container">
			<view class="left-img-box">
				<image v-if="clueInfo.follow_avatar" class="img" :src="clueInfo.follow_avatar" mode="aspectFit"></image>
				<image v-else class="img" src="../../static/img/bg_clues.png" mode="aspectFit"></image>
			</view>
			<view class="right-box">
				<view class="text-box">
					<text class="name">{{clueInfo.follow_name}}</text>
					<text class="department">招商跟进人</text>
				</view>
				<text class="phone">{{clueInfo.follow_mobile}}</text>
			</view>
		</view>
		<view class="clues-info-container">
			<text class="clues-title">线索信息</text>
			<view class="clues-card">
				<view class="status-tag">
					<up-text v-if="clueInfo.status == 1" color="#00B42A" size="14" text="潜在客户"></up-text>
					<up-text v-if="clueInfo.status == 2" color="#165DFF" size="14" text="待处理"></up-text>
					<up-text v-if="clueInfo.status == 3" color="#2ACFCE" size="14" text="转客户"></up-text>
					<up-text v-if="clueInfo.status == 4" color="#88929E" size="14" text="无效客户"></up-text>
				</view>
				<view class="card-row">
					<view class="label">客户姓名</view>
					<view class="value">{{clueInfo.contact_name ? clueInfo.contact_name : '-'}}</view>
				</view>
				<view class="card-row">
					<view class="label">客户手机号</view>
					<view class="display-flex-1">
						<view class="value">{{clueInfo.mobile ? clueInfo.mobile_style == 1 ? clueInfo.mobile : handleHiddenCode(clueInfo.mobile) : '-'}}</view>
						<text v-if="clueInfo.mobile" class="iconfont icon-dianhua public-icon" @click="handleCallPhone(clueInfo.mobile)"></text>
					</view>
				</view>
				<view class="card-row">
					<view class="label">公司名称</view>
					<view class="value">{{clueInfo.company_name ? clueInfo.company_name : '-'}}</view>
				</view>
				<view class="card-row">
					<view class="label">行业</view>
					<view class="value ellipsis">{{clueInfo.industry_text ? clueInfo.industry_text : '-'}}</view>
				</view>
				<view class="card-row">
					<view class="label">线索来源</view>
					<view class="value">{{clueInfo.from == 1 ? '自建线索' : '客户管理' }}</view>
				</view>
				<view class="card-row">
					<view class="label">其他联系方式</view>
					<view class="display-flex">
						<view class="methods value" v-if="clueInfo.other_contact_channel == 1">固话</view>
						<view class="methods value" v-if="clueInfo.other_contact_channel == 2">手机号</view>
						<view class="methods value" v-if="clueInfo.other_contact_channel == 3">微信</view>
						<view class="methods value" v-if="clueInfo.other_contact_channel ==4">邮箱</view>
						<view class="display-flex-1">
							<view class="content">{{clueInfo.other_contact_value}}</view>
							<text class="iconfont icon-fuzhi public-icon" @click="handleCopyInfo(clueInfo.other_contact_value)"></text>
						</view>
					</view>
				</view>
				<view class="card-row">
					<view class="label">创建人</view>
					<view class="value">{{JSON.stringify(clueInfo.created_name) !="{}" && clueInfo.created_name.name ? clueInfo.created_name.name : '-'}}</view>
				</view>
				<view class="card-row">
					<view class="label">更新时间</view>
					<view class="value">{{clueInfo.created_at ? moment(clueInfo.created_at).format('YYYY-MM-DD HH:mm') : '-'}}</view>
				</view>
				<view class="card-row">
					<view class="label">备注</view>
					<view class="value">{{clueInfo.remark ? clueInfo.remark : '-'}}</view>
				</view>
			</view>
			<text class="clues-title">预约信息</text>
			<view class="clues-card">
				<view class="card-row">
					<view class="label">预约项目</view>
					<view class="value">{{building_info != null && JSON.stringify(building_info) != '{}' ? building_info.community_info.name : '-'}}</view>
				</view>
				<view class="card-row">
					<view class="label">预约房源</view>
					<view class="value">{{houseMack}}</view>
				</view>
				<view class="card-row">
					<view class="label">看房时间</view>
					<view class="value">{{clueInfo.order_look_at ? moment(clueInfo.order_look_at).format('YYYY-MM-DD HH:mm') : '-'}}</view>
				</view>
			</view>
		</view>
		
		<view class="clues-info-container padding-top-0">
			<text class="clues-title">操作记录</text>
			<view v-if="operationList.length > 0" class="clues-record-card">
				<view class="record-list" v-for="(item, i) in operationList" :key="i">
					<view class="header-card">
						<text class="name">{{item.real_name}}</text>
						<text class="time">{{item.created_at ? moment(item.created_at).format('YYYY.MM.DD HH:mm') : '-'}}</text>
					</view>
					<view class="card-row">
						<view class="label">操作类型</view>
						<view class="value">{{item.content ? item.content : '-'}}</view>
					</view>
					<view class="card-row">
						<view class="label">备注</view>
						<view class="value">{{item.remark ? item.remark :'-'}}</view>
					</view>
				</view>
			</view>
			
			<view v-else class="no-data">
				<image class="img" src="../../static/img/noData.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="footer-btn">
			<view class="turnover-btn public-btn" @click="handleTurnoverClue">流转线索</view>
			<view class="turnover-btn public-btn" @click="handleOpenFollow">跟进记录</view>
		</view>
		<!-- 拨打电话 -->
		<call-phone ref="callPhoneRef"></call-phone>
		<!-- 流转线索 -->
		<u-popup :show="flowCueShow" round="20" zIndex="10070" mode="bottom" @touchmove.stop.prevent="moveHandle">
			<view>
				<view class="flow-header">
					<text class="title">流转线索</text>
					<view class="icon-close" @click="handleFollowClueClose">
						<u-icon name="close" color="#3D3D3D" size="16"></u-icon>
					</view>
				</view>
				<view class="flow-form">
					<view class="flow-form-item">
						<view class="label"><text class="check-icon">*</text>选择状态</view>
						<view class="value" @click="handleOpenFlowClue">
							<u-input placeholder="请选择" v-model="followForm.statusName" border="none" disabled disabledColor="#F9F9F9" customStyle="padding: 26rpx 30rpx 26rpx 20rpx;">
								<template #suffix>
									<image class="img" style="width: 20px; height: 20px;" src="../../static/img/right-arrow.png" mode=""></image>
								</template>
							</u-input>
						</view>
					</view>
					<view class="flow-form-item" v-if="followForm.status == 3">
						<view class="label"><text class="check-icon">*</text>跟进人</view>
						<view class="value" @click="handleExecutePopel('1')">
							<u-input v-model="followForm.follow_user_name" placeholder="请输入内容" border="none" disabled disabledColor="#F9F9F9" customStyle="padding: 26rpx 30rpx 26rpx 20rpx;">
								<template #suffix>
									<image class="img" style="width: 20px; height: 20px;" src="../../static/img/right-arrow.png" mode=""></image>
								</template>
							</u-input>
						</view>
					</view>
					
					<view class="flow-form-item" v-if="followForm.status == 1 || followForm.status == 4">
						<view class="label">备注</view>
						<view class="value">
							<u-textarea  v-model="followForm.remark" placeholder="请输入" ></u-textarea>
						</view>
					</view>
				</view>
				<view class="footer-btn-clue">
					<view class="submit-btn" @click="handleTransferSubmit">提交</view>
				</view>
			</view>
		</u-popup>
		<!-- 添加跟记录 -->
		<u-popup :show="flowCueRecordsShow" round="20" zIndex="10071" mode="bottom" @touchmove.stop.prevent="moveHandle">
			<view>
				<view class="flow-header">
					<text class="title">添加跟进记录</text>
					<view class="icon-close" @click="handleFollowClueRecordsClose">
						<u-icon name="close" color="#3D3D3D" size="16"></u-icon>
					</view>
				</view>
				<scroll-view :scroll-y="true" style="height: 400px;">
					<view class="flow-form">
						<view class="flow-form-item">
							<view class="label"><text class="check-icon">*</text>当前进度</view>
							<view class="value" @click="handleOpenCurrentSchedule">
								<u-input placeholder="请选择" v-model="followModal.schedule_name" border="none" disabled disabledColor="#F9F9F9" customStyle="padding: 26rpx 30rpx 26rpx 20rpx;">
									<template #suffix>
										<image class="img" style="width: 20px; height: 20px;" src="../../static/img/right-arrow.png" mode=""></image>
									</template>
								</u-input>
							</view>
						</view>
						<view class="flow-form-item">
							<view class="label"><text class="check-icon">*</text>跟进日期</view>
							<view class="value" @click="handleScheduleTime">
								<u-input v-model="followModal.follow_at_time" placeholder="请选择" border="none" disabled disabledColor="#F9F9F9" customStyle="padding: 26rpx 30rpx 26rpx 20rpx;">
									<template #suffix>
										<image class="img" style="width: 20px; height: 20px;" src="../../static/img/rili.png" mode=""></image>
									</template>
								</u-input>
							</view>
						</view>
						<view class="flow-form-item">
							<view class="label"><text class="check-icon">*</text>沟通方式</view>
							<view class="value" @click="handleCommunicationClick">
								<u-input v-model="followModal.communication_name" placeholder="请输入内容" border="none" disabled disabledColor="#F9F9F9" customStyle="padding: 26rpx 30rpx 26rpx 20rpx;">
									<template #suffix>
										<image class="img" style="width: 20px; height: 20px;" src="../../static/img/right-arrow.png" mode=""></image>
									</template>
								</u-input>
							</view>
						</view>
						<view class="flow-form-item" v-if="followModal.schedule != 4">
							<view class="label">跟进人</view>
							<view class="value" @click="handleExecutePopel('2')">
								<u-input v-model="followModal.follow_user_name" placeholder="请输入内容" border="none" disabled disabledColor="#F9F9F9" customStyle="padding: 26rpx 30rpx 26rpx 20rpx;">
									<template #suffix>
										<image class="img" style="width: 20px; height: 20px;" src="../../static/img/right-arrow.png" mode=""></image>
									</template>
								</u-input>
							</view>
						</view>
						<view class="flow-form-item" v-if="followModal.schedule != 4">
							<view class="label">下次跟进时间</view>
							<view class="value" @click="handleOpenPickerTime">
								<u-input v-model="followModal.next_follow_time_name" placeholder="请输入内容" border="none" disabled disabledColor="#F9F9F9" customStyle="padding: 26rpx 30rpx 26rpx 20rpx;">
									<template #suffix>
										<image class="img" style="width: 20px; height: 20px;" src="../../static/img/rili.png" mode=""></image>
									</template>
								</u-input>
							</view>
						</view>
						<view class="flow-form-item" v-if="followModal.schedule != 4">
							<view class="label">成交率</view>
							<view class="value">
								<u-input v-model="followModal.probability" type="number" placeholder="请输入内容" border="none" customStyle="padding: 26rpx 30rpx 26rpx 20rpx; background: #F9F9F9;">
									<template #suffix>
										<text>%</text>
									</template>
								</u-input>
							</view>
						</view>
						
						<view class="flow-form-item">
							<view class="label">跟进说明</view>
							<view class="value">
								<u-textarea v-model="followModal.remark" placeholder="请输入"></u-textarea>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="footer-btn-clue">
					<view class="submit-btn" @click="handleFollowSubmit">提交</view>
				</view>
			</view>
		</u-popup>
		<u-popup :show="flowCueRecordsListShow" round="20" zIndex="10070" mode="bottom" @touchmove.stop.prevent="moveHandle">
			<view class="">
				<view class="flow-header" style="border: none;">
					<text class="title">跟进记录（共{{recordsLists.length}}次）</text>
					<view class="icon-close" @click="handleFollowClueRecordsListClose">
						<u-icon name="close" color="#3D3D3D" size="16"></u-icon>
					</view>
				</view>
				<scroll-view :scroll-y="true" style="height: 400px;">
					<view class="record-box">
						<view class="records-list" v-for="(item, i) in recordsLists" :key="item.id">
							<view class="row-header">
								<text class="state">{{item.schedule ? scheduleObj[item.schedule] : '-'}}</text>
								<text class="time">{{item.follow_at ? moment(item.follow_at).format('YYYY.MM.DD') : '-'}}</text>
							</view>
							<view class="record-row">
								<view class="label">沟通方式</view>
								<view class="value">{{item.communication ? communicationObj[item.communication] : '-'}}</view>
							</view>
							<view class="record-row">
								<view class="label">跟进人</view>
								<view class="value">{{item.real_name ? item.real_name : '-'}}</view>
							</view>
							<view class="record-row">
								<view class="label">下次跟进时间</view>
								<view class="value">{{item.next_follow_time ? moment(item.next_follow_time).format('YYYY.MM.DD HH:mm') : '-'}}</view>
							</view>
							<view class="record-row">
								<view class="label">成交几率</view>
								<view class="value">{{item.probability ? item.probability + '%' : '-'}}</view>
							</view>
							<view class="record-row">
								<view class="label">跟进说明</view>
								<view class="value">{{item.remark ? item.remark : '-'}}</view>
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="footer-btn-clue">
					<view class="submit-btn" @click="handleFollowCreate">添加跟进记录</view>
				</view>
			</view>
		</u-popup>
		<u-overlay :show="overlayShow" :duration="400" :z-index ="10075" :opacity="0.3"></u-overlay>
		<!-- 跟进状态 -->
		<u-picker @cancel="handleFlowCluCnacel" @confirm="handleFlowCluConfirm" :show="flowcluesShow" :columns="cluColumns" keyName="label" cancelColor="#999999" confirmColor="#165DFF"></u-picker>
		<!-- 执行人 -->
		<u-picker @cancel="handleExecuteCnacel" @confirm="handleExecuteConfirm" :show="executeShow" :columns="tenantWorkerList" keyName="name" cancelColor="#999999" confirmColor="#165DFF"></u-picker>
		<!--  当前进度 -->
		<u-picker @cancel="handleScheduleCnacel" @confirm="handleScheduleConfirm" :show="scheduleShow" :columns="scheduleList" keyName="name" cancelColor="#999999" confirmColor="#165DFF"></u-picker>
		<!-- 沟通方式 -->
		<u-picker @cancel="handleCommunicationCnacel" @confirm="handleCommunicationConfirm" :show="communicationShow" :columns="communicationList" keyName="name" cancelColor="#999999" confirmColor="#165DFF"></u-picker>
		<!-- 跟进时间 -->
		<u-datetime-picker @confirm="handlePickerConfirm" @cancel="handlePickerCancel" confirmColor="#4A76F7" ref="datetimePickerRef" :show="datePickerShow" v-model="followModal.follow_at" mode="date" :formatter="formatter" ></u-datetime-picker>
		<!-- 下次跟进时间 -->
		<u-datetime-picker @confirm="handlePickerTimeConfirm" @cancel="handlePickerTimeCancel" confirmColor="#4A76F7" ref="datetimePicker2Ref" :show="datetimePickerShow" v-model="followModal.next_follow_time" mode="datetime" :formatter="formattertime" ></u-datetime-picker>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive, nextTick, computed } from 'vue'
	import { onReachBottom, onLoad, onReady } from '@dcloudio/uni-app'
	import {cluesDetail, listOperation, getZsUserList, modifyStatusSubmit,createFollow, followList} from '@/api_request/api'
	import moment from 'moment'
	import callPhone from '@/components/call-phone/call-phone'
	
	const clueInfo = ref({})
	const operationList = ref([])
	const phoneShow = ref(false)
	const callPhoneRef = ref(null)
	const flowCueShow = ref(false)
	const flowcluesShow = ref(false)
	const executeShow = ref(false)
	const routerOption = ref(null)
	const flowCueRecordsShow = ref(false)
	const scheduleShow = ref(false)
	const datetimePickerShow = ref(false)
	const datePickerShow = ref(false)
	const datetimePickerRef = ref(null)
	const datetimePicker2Ref = ref(null)
	const communicationShow = ref(false)
	const flowCueRecordsListShow = ref(false)
	const type = ref('')
	const recordsLists = ref([])
	const building_info = ref({})
	const overlayShow = ref(false)
	
	const cluColumns = reactive([
		[
			{
				label: '潜在客户',
				id: 1
			},
			{
				label: '待处理',
				id: 2
			},
			{
				label: '转客户',
				id: 3
			},
			{
				label: '无效客户',
				id: 4
			}
		]
	])
	const tenantWorkerList = reactive([])
	const statusObj = {
		'1': '潜在客户',
		'2': '待处理',
		'3': '转客户',
		'4': '无效客户',
	}
	// 流转线索
	const followForm = ref({
		status: '', //线索状态 状态：1=潜在客户，2=待处理，3=转客户，4=无效客户 
		statusName: '', 
		remark: '', //备注
		follow_user: '', 
		follow_user_name: '',
		id: '', // 线索id
	})
	// 跟进记录
	const followModal = ref({
		schedule: '', // 当前进度
		schedule_name: '', // 当前进度名字
		follow_at: Date.now(), // 跟进日期
		follow_at_time: '', // 跟进日期 时间戳
		communication: '', // 沟通方式
		communication_name: '', // 沟通方式名字
		follow_user: '', // 跟进人
		follow_user_name: '', // 跟进人name
		next_follow_time: Date.now(), // 跟进时间
		next_follow_time_name: '', // 跟进时间
		probability: '', // 成交率
		remark: '', // 跟进说明
		id: ''
	})
	
	const scheduleList = reactive([
		[
			{
				name: '沟通',
				value: 1
			},
			{
				name: '接触',
				value: 2
			},
			{
				name: '带看',
				value: 3
			},
			{
				name: '无效客户',
				value: 4
			},
		]
	])
	
	const communicationList = reactive([
		[
			{
				name: '电话',
				value: 1
			},
			{
				name: '微信',
				value: 2
			},
			{
				name: '客户现场沟通',
				value: 3
			}
		]
	])
	const communicationObj = {
		'1': '电话',
		'2': '微信',
		'3': '客户现场沟通',
	}
	const scheduleObj = {
		'1': '沟通',
		'2': '接触',
		'3': '带看',
		'4': '失效',
	}
	onLoad((option:any) => {
		routerOption.value = option
		getDetail(option.id)
		getListOperation(option.id)
		followForm.value.id = option.id
		followModal.value.id = option.id
	})
	
	onReady(() => {
	  // 微信小程序需要用此写法
	  datetimePickerRef.value.setFormatter(formatter);
	  datetimePicker2Ref.value.setFormatter(formattertime);
	});
	
	const houseMack = computed(()=> {
		console.log('=====123131312133=======', building_info.value);
		return `${building_info.value != null && JSON.stringify(building_info.value) != '{}' ? building_info.value.community_building.name : ''}-${building_info.value != null && JSON.stringify(building_info.value) != '{}' ? building_info.value.community_floor.name : ''}-${building_info.value != null && JSON.stringify(building_info.value) != '{}' ? building_info.value.room_number : ''}`
	})
	
	const formatter = (type, value) => {
	  if (type === 'year') {
	    return `${value}年`;
	  }
	  if (type === 'month') {
	    return `${value}月`;
	  }
	  if (type === 'day') {
	    return `${value}日`;
	  }
	  return value;
	};
	const formattertime = (type, value) => {
	  if (type === 'year') {
	    return `${value}年`;
	  }
	  if (type === 'month') {
	    return `${value}月`;
	  }
	  if (type === 'day') {
	    return `${value}日`;
	  }
	  if (type === 'hour') {
	    return `${value}时`;
	  }
	  if (type === 'minute') {
	    return `${value}分`;
	  }
	  return value;
	};
	
	const getDetail = (id:number | string)=> {
		cluesDetail({id: id}).then((res:any) => {
			if(res.code == 200) {
				console.log('===================', res);
				clueInfo.value = res.data
				followForm.value.status = res.data.status
				followForm.value.statusName =statusObj[res.data.status]
				building_info.value = res.data.building_info
			}else {
				uni.$showMsg(res.message)
			}
		}).catch(e => {
			uni.$showMsg(e.message)
		})
	}
	
	const getListOperation = (id:number | string)=> {
		listOperation({clue_id: id}).then((res:any) => {
			if(res.code == 200) {
				console.log('==========123123=========', res);
				operationList.value = res.data.list
				// clueInfo.value = res.data
			}else {
				uni.$showMsg(res.message)
			}
		}).catch(e => {
			uni.$showMsg(e.message)
		})
	}
	
	const handleHiddenCode = (phone: number | string)=> {
		// 隐号
		var arr = []
		try { arr.push(phone[0]) } catch (e) {}
		try { arr.push(phone[1]) } catch (e) {}
		try { arr.push(phone[2]) } catch (e) {}
		if (phone.length > 3) { try { arr.push(`*`) } catch (e) {} }
		if (phone.length > 4) { try { arr.push(`*`) } catch (e) {} }
		if (phone.length > 5) { try { arr.push(`*`) } catch (e) {} }
		if (phone.length > 6) { try { arr.push(`*`) } catch (e) {} }
		try { arr.push(phone[7]) } catch (e) {}
		try { arr.push(phone[8]) } catch (e) {}
		try { arr.push(phone[9]) } catch (e) {}
		try { arr.push(phone[10]) } catch (e) {}
		return arr.join(``)
	}
	// 拨打电话
	const handleCallPhone = (phone: number | string) => {
		callPhoneRef.value.handleShowPopue(phone)
	}
	
	// 复制
	const handleCopyInfo = (val: string | number)=> {
		wx.setClipboardData({
		  data: val,
		  success: function (res) {
		    wx.getClipboardData({
		      success: function (res) {
		        uni.$showMsg('复制成功！')
		      }
		    })
		  }
		})
	}
	
	const moveHandle = ()=> {
		return false
	}
	//  流转线索
	const handleTurnoverClue = ()=> {
		flowCueShow.value = true
		followForm.value.follow_user = ''
		followForm.value.status = ''
		followForm.value.statusName = ''
		followForm.value.follow_user_name = ''
		followForm.value.remark = ''
	}
	const handleOpenFlowClue = ()=> {
		flowcluesShow.value = true
	}
	const handleFollowClueClose = ()=> {
		flowCueShow.value = false
	}
	const handleFlowCluCnacel = ()=> {
		flowcluesShow.value = false
	}
	const handleFlowCluConfirm = (e)=> {
		console.log('312', e);
		followForm.value.status = e.value[0].id
		followForm.value.statusName =statusObj[e.value[0].id]
		flowcluesShow.value = false
	}
	//  跟进人
	const getFlowUser = ()=> {
		getZsUserList().then(res => {
			if(res.code == 200) {
				let arr = []
				 for (let [label, value] of Object.entries(res.data)) {
					 arr.push({
					    id: label,
					    name: value
					 })
				 }
				 tenantWorkerList.push(arr)
			}else {
				uni.$showMsg(res.message)
			}
		}).catch(err => {
			uni.$showMsg(err.message)
		})
	}
	const handleExecutePopel = (value: string)=> {
		type.value = value
		executeShow.value = true
		if(value == '2') overlayShow.value =true
	}
	const handleExecuteCnacel = ()=> {
		executeShow.value = false
		overlayShow.value = false
	}
	const handleExecuteConfirm = (e)=> {
		if(type.value == '1') {
			followForm.value.follow_user = e.value[0].id
			followForm.value.follow_user_name = e.value[0].name
		}else {
			followModal.value.follow_user = e.value[0].id
			followModal.value.follow_user_name = e.value[0].name
		}
		
		executeShow.value = false
		overlayShow.value = false
	}
	const handleTransferSubmit = ()=> {
		if(!followForm.value.status) return uni.$showMsg('请选择状态')
		if(followForm.value.status == 3 && !followForm.value.follow_user) return uni.$showMsg('请选择跟进人')
		const parasm = {
			status: followForm.value.status,
			remark: followForm.value.remark,
			follow_user: followForm.value.follow_user,
			id: followForm.value.id
		}
		modifyStatusSubmit(parasm).then(res => {
			if(res.code == 200) {
				uni.$showMsg('流转成功')
				flowCueShow.value = false
				getDetail(routerOption.value.id)
			}else {
				uni.$showMsg(res.message)
			}
		}).catch(e => {
			uni.$showMsg(e.message)
		})
	}
	
	//  添加跟进记录
	const handleOpenFollow = ()=> {
		getFollowList()
		flowCueRecordsListShow.value = true
	}
	const getFollowList = ()=> {
		followList({clue_id: routerOption.value.id}).then(res => {
			if(res.code == 200) {
				recordsLists.value = res.data.list
			}else {
				uni.$showMsg(res.message)
			}
		}).catch(err => {
			uni.$showMsg(err.message)
		})
	}
	const handleFollowClueRecordsListClose = ()=> {
		flowCueRecordsListShow.value = false
	}
	const handleFollowCreate = () => {
		followModal.value.schedule = ''
		followModal.value.schedule_name = ''
		followModal.value.follow_at = Date.now()
		followModal.value.follow_at_time = moment().format('YYYY-MM-DD');
		console.log('=========', followModal.value.follow_at_time, Date.now());
		followModal.value.communication = ''
		followModal.value.communication_name = ''
		followModal.value.follow_user = ''
		followModal.value.follow_user_name = ''
		followModal.value.next_follow_time = ''
		followModal.value.probability = ''
		followModal.value.remark = ''
		nextTick(() => {
			flowCueRecordsShow.value = true
		})
	}
	const handleFollowClueRecordsClose = ()=> {
		flowCueRecordsShow.value = false
	}
	const handleOpenCurrentSchedule = ()=> {
		scheduleShow.value = true
		overlayShow.value =true
	}
	const handleScheduleCnacel = ()=> {
		scheduleShow.value = false
	}
	const handleScheduleConfirm = (e:any)=> {
		followModal.value.schedule = e.value[0].value
		followModal.value.schedule_name = e.value[0].name
		scheduleShow.value = false
		overlayShow.value = false
	}
	const handleScheduleTime = ()=> {
		datePickerShow.value = true
		overlayShow.value =true
		overlayShow.value = false
	}
	
	const handlePickerConfirm = (e:any)=> {
		followModal.value.follow_at = e.value
		followModal.value.follow_at_time = moment(e.value).format('YYYY-MM-DD');
		datePickerShow.value = false
	}
	const handlePickerCancel = ()=> {
		datePickerShow.value = false
	}
	// 沟通方式
	const handleCommunicationClick = ()=> {
		communicationShow.value = true
		overlayShow.value =true
	}
	const handleCommunicationCnacel = ()=> {
		communicationShow.value = false
		overlayShow.value = false
	}
	const handleCommunicationConfirm = (e:any)=> {
		followModal.value.communication = e.value[0].value
		followModal.value.communication_name = e.value[0].name
		communicationShow.value = false
		overlayShow.value = false
	}
	const handleOpenPickerTime = ()=> {
		datetimePickerShow.value = true
		overlayShow.value =true
	}
	const handlePickerTimeCancel= ()=> {
		datetimePickerShow.value = false
		overlayShow.value = false
	}
	const handlePickerTimeConfirm= (e:any)=> {
		followModal.value.next_follow_time = e.value
		followModal.value.next_follow_time_name = moment(e.value).format('YYYY-MM-DD HH:mm');
		datetimePickerShow.value = false
		overlayShow.value = false
	}
	const handleFollowSubmit = ()=> {
		if(!followModal.value.schedule) return uni.$showMsg('请选择当前进度')
		if(!followModal.value.follow_at) return uni.$showMsg('请选择跟进日期')
		if(!followModal.value.communication) return uni.$showMsg('请选择沟通方式')
		if(followModal.value.schedule != 4) {
			if(Number(followModal.value.probability) > 100) return uni.$showMsg('成交率小于100')
		}
		if(followModal.value.remark && followModal.value.remark.length > 30) return uni.$showMsg('备注不能超过30个字')
		const params = {
			clue_id: followModal.value.id,
			schedule: followModal.value.schedule,
			follow_at: followModal.value.follow_at,
			communication: followModal.value.communication,
			follow_user: followModal.value.follow_user,
			next_follow_time: followModal.value.next_follow_time,
			probability: followModal.value.probability,
			remark: followModal.value.remark,
		}
		createFollow(params).then(res => {
			if(res.code == 200) {
				uni.$showMsg('添加成功')
				flowCueRecordsShow.value = false
				getListOperation(routerOption.value.id)
				getFollowList()
			}else {
				uni.$showMsg(res.message)
			}
		}).catch(err => {
			uni.$showMsg(err.message)
		})
	}
	getFlowUser()
</script>

<style lang="scss" scoped>
.clues-detail-container {
	padding: 0 20rpx 220rpx 20rpx;
	box-sizing: border-box;
	
	.follow-up-container {
		display: flex;
		align-items: flex-end;
		margin-top: 30rpx;
		
		.left-img-box {
			margin-right: 20rpx;
			width: 100rpx;
			height: 100rpx;
			border: 2rpx solid #AFC3FF;
			border-radius: 50%;
			
			.img {
				width: 100%;
				height: 100%;
			}
		}
		
		.right-box {
			padding-top: 20rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			
			.text-box {
				display: flex;
				align-items: flex-end;
				
				.name {
					font-size: 36rpx;
					font-weight: 500;
					color: #515A6E;
					margin-right: 20rpx;
				}
				
				.department {
					font-size: 24rpx;
					color: #8091A4;
				}
			}
			
			.phone {
				margin-top: 20rpx;
				font-size: 24rpx;
				color: #8091A4;
			}
		}
	}
	
	.clues-info-container {
		padding-top: 10rpx;
		box-sizing: border-box;
		
		.clues-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #333333;
			margin-top: 40rpx;
			display: block;
		}
		
		.clues-card {
			margin-top: 24rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			padding: 30rpx 40rpx 40rpx;
			box-sizing: border-box;
			
			.status-tag {
				margin-bottom: 40rpx;
			}
			
			.card-row {
				margin-bottom: 34rpx;
				display: flex;
				align-items: flex-start;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.label {
					width: 168rpx;
					margin-right: 54rpx;
					font-size: 28rpx;
					color: #8091A4;
				}
				
				.value {
					font-size: 28rpx;
					color: #333333;
					flex: 1;
				}
				
				.value.ellipsis {
					max-width: 412rpx;
					display: block;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
				
				.display-flex {
					display: flex;
					flex-direction: column;
					flex: 1;
					
					.content {
						margin-top: 24rpx;
					}
				}
				
				.display-flex-1 {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: space-between;
					
					.public-icon {
						font-size: 36rpx;
						color: #4A76F7;
					}
				}
			}
		}
		
		.clues-record-card {
			padding: 40rpx;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin-top: 24rpx;
			
			.record-list {
				padding-top: 40rpx;
				padding-bottom: 40rpx;
				box-sizing: border-box;
				border-bottom: 1px dashed #F4F4F4;
				&:first-child {
					padding-top: 0;
				}
				
				&:last-child {
					border: none;
					padding-bottom: 0;
				}
				
				.header-card {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 40rpx;
					
					.name {
						font-size: 28rpx;
						font-weight: 500;
						color: #333333;
					}
					
					.time {
						font-size: 28rpx;
						color: #8091A4;
					}
				}
				
				.card-row {
					margin-bottom: 34rpx;
					display: flex;
					align-items: flex-start;
					
					&:last-child {
						margin-bottom: 0;
					}
					
					.label {
						width: 168rpx;
						margin-right: 54rpx;
						font-size: 28rpx;
						color: #8091A4;
					}
					
					.value {
						font-size: 28rpx;
						color: #333333;
						flex: 1;
					}
					
					.value.ellipsis {
						max-width: 412rpx;
						display: block;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}
				}
			}
		}
		
		.no-data {
			display: flex;
			align-items: center;
			justify-content: center;
			
			.img {
				width: 160rpx;
				height: 160rpx;	
				margin-top: 40rpx;
			}
		}
	}
	
	.clues-info-container.padding-top-0 {
		padding-top: 0;
	}
	
	.footer-btn {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: 16rpx 40rpx;
		box-sizing: border-box;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1rpx solid #D8D8D8;
		background-color: #FFFFFF;
		padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
		
		.public-btn {
			width: 310rpx;
			height: 92rpx;
			font-size: 36rpx;
			margin-bottom: 16rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-right: 50rpx;
			border-radius: 100rpx;
			border: 2rpx solid #4A76F7;
			color: #4A76F7;
			
			&:last-child {
				margin-right: 0;
				color: #FFFFFF;
				background: #4A76F7;
			}
		}
		
	}

	.flow-header {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 40rpx 0;
		box-sizing: border-box;
		position: relative;
		border-bottom: 1rpx solid #D8D8D8;
		
		.title {
			font-size: 36rpx;
			color: #333333;
		}
		
		.icon-close {
			position: absolute;
			top: 44rpx;
			right: 50rpx;
		}
	}
	
	.flow-form {
		padding: 50rpx 40rpx 150rpx;
		box-sizing: border-box;
		
		.flow-form-item {
			display: flex;
			flex-direction: column;
			margin-top: 44rpx;
			
			&:first-child {
				margin-top: 0;
			}
			
			.label {
				font-size: 28rpx;
				color: #8091A4;
				position: relative;
				
				.check-icon {
					position: absolute;
					top: 50%;
					font-size: 28rpx;
					left: -20rpx;
					transform: translateY(-50%);
					color: #EE4646;
				}
			}
			
			.value {
				margin-top: 30rpx;
				
				:deep(.u-textarea){
					min-height: 140rpx;
					background: #F9F9F9;
					border-radius: 10rpx;
				}
			}
		}
	}
	
	.record-box {
		padding: 0 20rpx 40rpx;
		box-sizing: border-box;
		
		.records-list {
			background: #FAFAFA;
			border-radius: 10rpx;
			padding: 36rpx 40rpx 30rpx;
			box-sizing: border-box;
			margin-bottom: 20rpx;
			
			.row-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				
				.state {
					font-size: 28rpx;
					font-weight: 500;
					color: #333333;
				}
				
				.time {
					ont-size: 28rpx;
					color: #8091A4;
				}
			}
			
			.record-row {
				display: flex;
				align-items: flex-start;
				margin-top: 30rpx;
				
				&:first-child {
					margin-top: 36rpx;
				}
				.label {
					width: 168rpx;
					font-size: 28rpx;
					color: #8091A4;
					margin-right: 54rpx;
				}
				
				.value {
					flex: 1;
					font-size: 28rpx;
					color: #333333;
				}
			}
		}
	}
	
	.footer-btn-clue{
		border-top: 1rpx solid #D8D8D8;
		padding: 16rpx 40rpx 0;
		padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
		padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
		box-sizing: border-box;
		
		.submit-btn {
			height: 92rpx;
			background: #4A76F7;
			border-radius: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			color: #FFFFFF;
			margin-bottom: 16rpx;
		}
	}
	
	:deep(.u-popup__content) {
		border-radius: 40rpx;
		.u-picker{
			.u-toolbar {
				.u-toolbar__title {
					font-size: 36rpx;
					color: #333333;
				}
			}
		}
	}
}
</style>
